<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>JOYRICH</title>
	<script src="js/wen.js"></script>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body class="index">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
				<div class="page1 clearfix">
					<img src="images/page1_01.jpg" alt="" title="">
					<div class="p1_text1 ani" swiper-animate-effect="bounceInLeft"  swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
					<div class="p1_text2 ani" swiper-animate-effect="bounceInRight"  swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
					<div class="p1_log"></div>
				</div>
            </div>
            <div class="swiper-slide">
            	<div class="page2">
            		<div class="mian">
            			<div class="p2_log"></div>
            			<div class="con1">
            				<img src="images/p2_img1.jpg" alt="" title="">
            				<p>JOYRICH</p>
            				<p>于2008年在美国洛杉矶创立</p>
            				<p>以自由、希望、梦想和爱为概念</p>
            				<p>融合数种文化精神本质</p>
            				<p>创造出独特的JOYRICH风格</p>
            				<p>并与多位知名艺术大师合作</p>
            				<p>为潮流人士提供兼具清新活力</p>
            				<p>与摩登感的时尚选择</p>
            			</div>
            			<div class="con2">
            				<img src="images/p2_img2.jpg" alt="" title="">
            				<span></span>
            				<p>2015年</p>
            				<p>JOYRICH携手国际领先视光科研团队</p>
            				<p>沿袭其服装的创新理念</p>
            				<p>发布全新产品线——潮流眼镜</p>
            				<p>汲取东西方艺术元素</p>
            				<p>把眼镜作为配饰文化的主流</p>
            				<p>引领现代时尚美学</p>
            			</div>
            		</div>
            	</div>
            </div>
            <div class="swiper-slide">
            	<div class="page3">
            		<div class="mian">
            			<h2 class="ani" swiper-animate-effect="bounceInLeft"  swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">经典复古</h2>
            			<h2 class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">不惧对比</h2>
            			<div class="p3_log"></div>
            			<div class="tit">
            				<p>JOYRICH潮牌眼镜春夏新款</p>
            				<p>无论是玳瑁纹理还是粗框板材、时尚印花， 总有一款唤醒你的潮流基因</p>
            			</div>
            			<div class="glasses" id="glasses"></div>	
            		</div>
            	</div>
            </div>
            <div class="swiper-slide">
            	<div class="page4">
            		<div class="p3_bg1"></div>
            		<div class="p3_bg2"></div>
            		<div class="mian">
                        <!-- 头部logo -->
            			<div class="p4_log"></div>
                        <!-- 小熊开车 -->
                        <div class="bar_che">
                            <div class="che" id="che"></div>
                            <div class="gonglu"></div>
                        </div>
                        <dl class="tiaojian clearfix">
                             <dt>参赛条件</dt>
                             <dd>只要你是在校大学生，只要你追求潮流生活方式，只要你是最IN的时尚达人无论男女都可参加</dd>
                         </dl>
                         <dl class="fangshi clearfix">
                             <dt>参赛奖励</dt>
                             <dd>
                                 <p>上传你戴着光学镜（近视镜）的照片即可</p>
                                 <p>我们将在24小时内审核完毕</p>
                                 <p>
                                    <span>投票时间：</span>
                                    <span>3月28日—4月12日</span>
                                </p>
                                 <p>
                                    <span>奖品领取：</span>
                                    <span>请真实填写你的联系方式，活动 结束后，将有工作人员与你联系</span>
                                </p>
                             </dd>
                         </dl>
                         <dl class="jizhi clearfix">
                             <dt>参赛方式</dt>
                             <dd>
                                 <p>
                                    <span>一等奖：</span>
                                    <span>男女各一名</span>
                                </p>
                                 <p>
                                    <span>奖<var>品：</var></span>
                                    <span>3000元现金大奖+JOYRICH全国校园大使称号+免费到厦门拍摄写真+JOYRICH潮牌眼镜一副</span>
                                </p>
                                 <p>
                                    <span>二等奖：</span>
                                    <span>总票数第二名</span>
                                </p>
                                 <p>
                                    <span>奖<var>品：</var></span>
                                    <span>1000元现金大奖+JOYRICH潮牌眼镜一副</span>
                                </p>
                                 <p>
                                    <span>三等奖：</span>
                                    <span>总票数第三名</span>
                                </p>
                                 <p>
                                    <span>奖<var>品：</var></span>
                                    <span>500元现金大奖+JOYRICH潮牌眼镜一副</span>
                                </p>
                             </dd>
                         </dl> 
            		</div>
            	</div>
            </div>
         </div>
    </div>

    <script src="js/swiper.min.js"></script>
    <script>
        var glasses = document.getElementById('glasses'),
            che = document.getElementById('che');
	    var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        paginationClickable: true,
	        direction: 'vertical', 
		  	onSlideChangeEnd: function(swiper){ 
                switch (swiper.activeIndex) {
                    case 2:
                        che.style.webkitAnimation = "none";
                        glasses.style.webkitAnimation = "tap 1.2s linear infinite";
                        break;
                    case 3:
                        che.style.webkitAnimation = "run 6s linear infinite";
                        glasses.style.webkitAnimation = "none";
                        break;
                }   
            }   
	    });

	    // var glaArr = ["p3_glasses1.png","p3_glasses2.png","p3_glasses3.png","p3_glasses4.png","p3_glasses5.png","p3_glasses6.png"];
	    // var glassesN = 0;
	    // var t = setInterval(glaChange, 200);
	    // function glaChange() {
	    // 	glassesN++;
	    // 	if (glassesN >= glaArr.length){
	    // 		glassesN = 0;
	    // 	}
	    // 	$("#glasses").css({
	    // 		"background" : "url(images/" + glaArr[glassesN] + ") center center no-repeat",
	    // 		"backgroundSize" : "100%"
	    // 	})
	    // }
    </script>
</body>
</html>